<template>
	<div class="conversation">
		<h1>活动资讯</h1>
		<div class="list">
			<ul>
				<li v-for="(item, index) in titles" :key="index" @click="change(item.id)"
					:class="{'active': flag == item.id}">
					{{ item.title }}
				</li>
			</ul>
			
			<el-divider></el-divider>
			
			<el-carousel :interval="3000" trigger="click" arrow="always" type="card" height="290px">
				<el-carousel-item v-for="(item, index) in srcImg" :key="index">
					<el-card :body-style="{ padding: '8px' }">
						<img :src="item.srcImg" class="image">
						<h3>{{ item.title }}</h3>
					</el-card>
				</el-carousel-item>
			</el-carousel>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				flag: 10,
				titles: [{
						id: 10,
						title: '游记'
					},
					{
						id: 11,
						title: '史记'
					},
					{
						id: 12,
						title: '心得'
					}
				],
				srcImg: [{
						id: 1,
						srcImg: require('../../../assets/img/qt1.png'),
						title: '不会写诗的体育老师不是好骑手'
					},
					{
						id: 2,
						srcImg: require('../../../assets/img/qt2.png'),
						title: '不会写诗的体育老师不是好骑手不会写诗的体育老师不是好骑手不会写诗的体育老师不是好骑手'
					},
					{
						id: 3,
						srcImg: require('../../../assets/img/qt2.png'),
						title: '不会写诗的体育老师不是好骑手'
					}
				]
			}
		},
		methods: {
			change(flag) {
				this.flag = flag
			}
		},
	}
</script>

<style lang="scss" scoped>
	h1 {
		text-align: center;
		margin: 50px 0;
		font-weight: normal;
		color: #000;
	}

	.active {
		color: #CB282D;
	}

	.conversation {
		width: 70%;
		margin: 0 auto;

		.list {
			width: 100%;

			ul {
				width: 80%;
				margin: 0 auto;
				list-style: none;
				display: flex;
				justify-content: space-around;
				margin-bottom: 20px;

				li {
					font-family: "黑体";
					font-weight: bold;

					&:hover {
						cursor: pointer;
					}
				}
			}
			
			.el-card__body {
				position: relative;
				width: 100%;
				img {
					width: 100%;
					height: 100%;
				}
				h3 {
					box-sizing: border-box;
					width: 98%;
					position: absolute;
					bottom: 0;
					padding: 6px;
					text-align: center;
					color: #fff;
					background: rgba(0,0,0,0.6);
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					
				}
			}
		}
	}
</style>
